<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<script src="js/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/index.css">
		<!-- 引入组件库 -->
		<script src="js/element/index.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/qs.min.js"></script>
		<style>
			#app{
				margin-top: 200px;
			}
			body{
				background-color: #00FFFF;
			}
		
		</style>
	</head>
	<body>
		<div id="app">
			<el-form :model="userInfo" :rules="rules" status-icon ref="userInfo" label-width="100px" class="demo-ruleForm">
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item  prop="username">
							<el-input prefix-icon="el-icon-user-solid" type="text" v-model="userInfo.username" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item  prop="userpwd">
							<el-input prefix-icon="el-icon-s-goods" type="password" v-model="userInfo.userpwd" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8" :offset="6">
						<el-form-item>
							<el-button type="primary" @click="login()">提交</el-button>
							<el-button @click="resetForm('userInfo')">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				userInfo: {
					username: "",
					userpwd: ""
				},
				 rules: {
				          username: [
				            { required: true, message: '请输入用户名', trigger: 'blur' },
				            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				          ],
						  userpwd: [
						    { required: true, message: '请输入密码', trigger: 'blur' }
						  ]
						  }
			},
			methods: {
				login: function() {
					// qs.stringify()将对象 序列化成URL的形式，以&进行拼接。
					var params=Qs.stringify(this.userInfo)
					// 通过axios网络请求库发起请求
					axios.post('http://localhost:8086/login',params)
					  .then(function (response) {
						if(response.data=="ok"){
							window.location.href="welcome.html"
						}else{
							window.location.href="login.html"
						}
					  })
					  .catch(function (error) {
						console.log(error);
					  });

				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}
			}
		})
	</script>
</html>
